<template>
  <div class="check-in-management">
    <!-- 搜索筛选区域 -->
    <div class="search-filters">
      <div class="filter-row">
        <!-- 房屋编码搜索 -->
        <div>
          <span class="search-item">房屋编码</span>
          <input
              v-model="searchForm.houseCode"
              type="text"
              placeholder="请输入房屋编号"
              class="input-field"
          />
        </div>

        <!-- 户主姓名搜索 -->
        <div>
          <span class="search-item">户主姓名</span>
          <input
              v-model="searchForm.ownerName"
              type="text"
              placeholder="请输入户主姓名"
              class="input-field"
          />
        </div>

        <!-- 协议编码搜索 -->
        <div>
          <span class="search-item">协议编码</span>
          <input
              v-model="searchForm.agreementCode"
              type="text"
              placeholder="请输入协议编码"
              class="input-field"
          />
        </div>

        <button @click="handleSearch" class="btn-primary">
          <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPnga03cd43e27317f20428660e14317e35a64a3d907d88f824770f063b2f9fd5f10" alt="搜索" class="btn-icon" />
          搜索
        </button>
        <button @click="handleReset" class="btn-secondary">
          <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngd1ee69767e02bb56b7c745624d059b292108792e966600668227ff5d22467bbe" alt="重置" class="btn-icon" />
          重置
        </button>
      </div>
    </div>

    <!-- 分割线 -->
    <div class="divider"></div>

    <!-- 操作按钮组 -->
    <div class="operation-buttons">
      <button
          @click="handleAdd"
          :class="['btn-add', { 'btn-selected': operationMode === 'add' }]"
      >
        <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngf1cdfd3741aaeaf19e733deebf065b44a820a4e6e4d83792de3c6e699c670645" alt="新增" class="btn-icon" />
        新增
      </button>

      <button
          @click="handleModeChange('edit')"
          :class="['btn-add', { 'btn-selected': operationMode === 'edit' }]"
      >
        <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8dd30a7302a6f2ab4df9f28606f440873a476132867bc3718014adf8e7a187da" alt="修改" class="btn-icon" />
        修改
      </button>

      <button
          @click="handleModeChange('delete')"
          :class="['btn-add', { 'btn-selected': operationMode === 'delete' }]"
      >
        <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng7e588fa8b8650f5efd6ef1233ed984dd6881ff2d70f829a9cd26b4482d233394" alt="删除" class="btn-icon" />
        删除
      </button>

      <!-- 导出按钮 -->
      <button @click="handleExport" class="btn-add">
        <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng7e588fa8b8650f5efd6ef1233ed984dd6881ff2d70f829a9cd26b4482d233394" alt="导出" class="btn-icon" />
        导出
      </button>

      <!-- 批量删除按钮 -->
      <button
          v-if="operationMode === 'delete' && selectedRecords.length > 0"
          @click="handleBatchDelete"
          class="btn-batch-delete"
      >
        批量删除 ({{ selectedRecords.length }})
      </button>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <table class="data-table">
        <thead>
        <tr class="table-header">
          <!-- 删除模式下显示全选框 -->
          <th v-if="operationMode === 'delete'">
            <input
                type="checkbox"
                @change="handleSelectAll"
                :checked="isAllSelected"
                class="checkbox"
            />
          </th>
          <th>序号</th>
          <th>房屋编码</th>
          <th>户主姓名</th>
          <th>缴费到期时间</th>
          <th>缴费倒计时</th>
          <th>合同有效期</th>
          <th>入住时间</th>
          <th>退房时间</th>
          <th>协议编码</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(record, index) in paginatedRecords" :key="record.id" class="table-row">
          <!-- 删除模式下显示复选框 -->
          <td v-if="operationMode === 'delete'">
            <input
                type="checkbox"
                :value="record.id"
                v-model="selectedRecords"
                class="checkbox"
            />
          </td>
          <td>{{ (pagination.currentPage - 1) * pagination.pageSize + index + 1 }}</td>
          <td>{{ record.houseCode }}</td>
          <td>{{ record.name }}</td>
          <td>{{ record.paymentDueDate }}</td>
          <td>
            <div :class="getCountdownClass(record)">
            {{ getPaymentCountdown(record.paymentDueDate) }}
            </div>
          </td>
          <td>{{ formatContractValidity(record.effectiveDate, record.expiryDate) }}</td>
          <td>{{ record.moveInDate }}</td>
          <td>{{ record.moveOutDate || '-' }}</td>
          <td>{{ record.contractCode }}</td>
          <td class="action-buttons">
            <!-- 查看按钮 - 始终显示 -->
            <button @click="handleView(record)" class="action-btn" title="查看详情">
              <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng7e588fa8b8650f5efd6ef1233ed984dd6881ff2d70f829a9cd26b4482d233394" alt="查看" />
            </button>

            <!-- 编辑按钮 - 修改模式下显示 -->
            <button v-if="operationMode === 'edit'" @click="handleEdit(record)" class="action-btn" title="编辑">
              <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8dd30a7302a6f2ab4df9f28606f440873a476132867bc3718014adf8e7a187da" alt="编辑" />
            </button>

            <!-- 删除按钮 - 删除模式下显示 -->
            <button v-if="operationMode === 'delete'" @click="handleSingleDelete(record)" class="action-btn" title="删除">
              <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng7e588fa8b8650f5efd6ef1233ed984dd6881ff2d70f829a9cd26b4482d233394" alt="删除" />
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination">
      <span class="pagination-info">共 {{ pagination.totalPages }} 页</span>
      <button @click="goToPrevPage" :disabled="pagination.currentPage === 1" class="pagination-btn">上一页</button>
      <button
          v-for="page in visiblePages"
          :key="page"
          @click="goToPage(page)"
          :class="['pagination-btn', { 'active': page === pagination.currentPage }]"
      >
        {{ page }}
      </button>
      <button @click="goToNextPage" :disabled="pagination.currentPage === pagination.totalPages" class="pagination-btn">下一页</button>
      <span class="pagination-goto">前往</span>
      <input v-model.number="gotoPage" @keyup.enter="handleGotoPage" class="goto-input" />
      <span>页</span>
    </div>

    <!-- 新增/编辑/查看弹窗 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ modalTitle }}</h3>
          <button @click="closeModal" class="close-btn">×</button>
        </div>
        <div v-if="modalType === 'view'" class="modal-tabs">
          <button
            :class="['tab-btn', { 'active': activeTab === 'checkin' }]"
            @click="activeTab = 'checkin'">
            入住详情
          </button>
          <button
            :class="['tab-btn', { 'active': activeTab === 'house' }]"
            @click="activeTab = 'house'">
            房屋详情
          </button>
          <button
            :class="['tab-btn', { 'active': activeTab === 'owner' }]"
            @click="activeTab = 'owner'">
            人员详情
          </button>
          <button
            :class="['tab-btn', { 'active': activeTab === 'agreement' }]"
            @click="activeTab = 'agreement'">
            协议详情
          </button>
        </div>
        <div class="modal-body">
          <!-- 入住详情 -->
          <div v-if="modalType === 'view' && activeTab === 'checkin'" class="form-grid">
            <div class="form-item">
              <label>房屋编码</label>
              <input v-model="currentRecord.houseCode" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>户主姓名</label>
              <input v-model="currentRecord.ownerName" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>缴费到期时间</label>
              <input v-model="currentRecord.paymentExpiryDate" type="date" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>缴费倒计时</label>
              <input :value="getPaymentCountdown(currentRecord.paymentExpiryDate)" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>合同有效期</label>
              <input v-model="currentRecord.contractValidity" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>入住时间</label>
              <input v-model="currentRecord.checkInDate" type="date" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>退房时间</label>
              <input v-model="currentRecord.checkOutDate" type="date" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>协议编码</label>
              <input v-model="currentRecord.agreementCode" disabled class="form-input" />
            </div>
          </div>

          <!-- 房屋详情 -->
          <div v-if="modalType === 'view' && activeTab === 'house'" class="detail-grid">
            <div class="detail-item">
              <label>房屋编码：</label>
              <span>{{ houseDetail.houseCode }}</span>
            </div>
            <div class="detail-item">
              <label>小区名称：</label>
              <span>{{ houseDetail.communityName }}</span>
            </div>
            <div class="detail-item">
              <label>楼栋：</label>
              <span>{{ houseDetail.building }}</span>
            </div>
            <div class="detail-item">
              <label>单元：</label>
              <span>{{ houseDetail.unit }}</span>
            </div>
            <div class="detail-item">
              <label>楼层：</label>
              <span>{{ houseDetail.floor }}</span>
            </div>
            <div class="detail-item">
              <label>房号：</label>
              <span>{{ houseDetail.roomNumber }}</span>
            </div>
            <div class="detail-item">
              <label>房屋面积：</label>
              <span>{{ houseDetail.area }} 平方米</span>
            </div>
            <div class="detail-item">
              <label>房屋类型：</label>
              <span>{{ houseDetail.houseType }}</span>
            </div>
            <div class="detail-item">
              <label>房屋状态：</label>
              <span>{{ houseDetail.status }}</span>
            </div>
            <div class="detail-item">
              <label>装修状态：</label>
              <span>{{ houseDetail.decorationStatus }}</span>
            </div>
          </div>

          <!-- 人员详情 -->
          <div v-if="modalType === 'view' && activeTab === 'owner'" class="detail-grid">
            <div class="detail-item">
              <label>姓名：</label>
              <span>{{ ownerDetail.name }}</span>
            </div>
            <div class="detail-item">
              <label>性别：</label>
              <span>{{ ownerDetail.gender }}</span>
            </div>
            <div class="detail-item">
              <label>身份证号：</label>
              <span>{{ ownerDetail.idCard }}</span>
            </div>
            <div class="detail-item">
              <label>联系电话：</label>
              <span>{{ ownerDetail.phone }}</span>
            </div>
            <div class="detail-item">
              <label>电子邮箱：</label>
              <span>{{ ownerDetail.email }}</span>
            </div>
            <div class="detail-item">
              <label>紧急联系人：</label>
              <span>{{ ownerDetail.emergencyContact }}</span>
            </div>
            <div class="detail-item">
              <label>紧急联系电话：</label>
              <span>{{ ownerDetail.emergencyPhone }}</span>
            </div>
            <div class="detail-item">
              <label>户籍地址：</label>
              <span>{{ ownerDetail.address }}</span>
            </div>
            <div class="detail-item">
              <label>职业：</label>
              <span>{{ ownerDetail.occupation }}</span>
            </div>
            <div class="detail-item">
              <label>工作单位：</label>
              <span>{{ ownerDetail.workplace }}</span>
            </div>
          </div>

          <!-- 协议详情 -->
          <div v-if="modalType === 'view' && activeTab === 'agreement'" class="detail-grid">
            <div class="detail-item">
              <label>协议编码：</label>
              <span>{{ agreementDetail.agreementCode }}</span>
            </div>
            <div class="detail-item">
              <label>房屋编码：</label>
              <span>{{ agreementDetail.houseCode }}</span>
            </div>
            <div class="detail-item">
              <label>户主姓名：</label>
              <span>{{ agreementDetail.ownerName }}</span>
            </div>
            <div class="detail-item">
              <label>协议类型：</label>
              <span>{{ agreementDetail.agreementType }}</span>
            </div>
            <div class="detail-item">
              <label>签约时间：</label>
              <span>{{ agreementDetail.signDate }}</span>
            </div>
            <div class="detail-item">
              <label>生效时间：</label>
              <span>{{ agreementDetail.effectiveDate }}</span>
            </div>
            <div class="detail-item">
              <label>到期时间：</label>
              <span>{{ agreementDetail.expiryDate }}</span>
            </div>
            <div class="detail-item">
              <label>协议状态：</label>
              <span>{{ agreementDetail.status }}</span>
            </div>
            <div class="detail-item">
              <label>租金：</label>
              <span>{{ agreementDetail.rent }} 元/月</span>
            </div>
            <div class="detail-item">
              <label>押金：</label>
              <span>{{ agreementDetail.deposit }} 元</span>
            </div>
          </div>

          <!-- 新增/编辑表单 -->
          <div v-if="modalType !== 'view'" class="form-grid">
            <div class="form-item">
              <label>房屋编码</label>
              <input v-model="currentRecord.houseCode" :disabled="modalType === 'view'" class="form-input" />
            </div>
            <div class="form-item">
              <label>户主姓名</label>
              <input v-model="currentRecord.ownerName" :disabled="modalType === 'view'" class="form-input" />
            </div>
            <div class="form-item">
              <label>缴费到期时间</label>
              <input v-model="currentRecord.paymentExpiryDate" type="date" :disabled="modalType === 'view'" class="form-input" />
            </div>
            <div class="form-item">
              <label>合同有效期</label>
              <input v-model="currentRecord.contractValidity" :disabled="modalType === 'view'" class="form-input" />
            </div>
            <div class="form-item">
              <label>入住时间</label>
              <input v-model="currentRecord.checkInDate" type="date" :disabled="modalType === 'view'" class="form-input" />
            </div>
            <div class="form-item">
              <label>退房时间</label>
              <input v-model="currentRecord.checkOutDate" type="date" :disabled="modalType === 'view'" class="form-input" />
            </div>
            <div class="form-item">
              <label>协议编码</label>
              <input v-model="currentRecord.agreementCode" :disabled="modalType === 'view'" class="form-input" />
            </div>
          </div>
        </div>
        <div v-if="modalType !== 'view'" class="modal-footer">
          <button @click="closeModal" class="btn-cancel">取消</button>
          <button @click="handleSave" class="btn-save">保存</button>
        </div>
        <div v-if="modalType === 'view'" class="modal-footer">
          <button @click="closeModal" class="btn-cancel">关闭</button>
        </div>
      </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div v-if="showDeleteConfirm" class="modal-overlay" @click="cancelDelete">
      <div class="modal-content delete-confirm-modal" @click.stop>
        <div class="modal-header">
          <h3>确认删除</h3>
          <button @click="cancelDelete" class="close-btn">×</button>
        </div>
        <div class="modal-body">
          <p v-if="deleteType === 'single'">确定要删除入住记录 "{{ deleteTarget.houseCode }}" 吗？</p>
          <p v-else>确定要删除选中的 {{ selectedRecords.length }} 个入住记录吗？</p>
        </div>
        <div class="modal-footer">
          <button @click="cancelDelete" class="btn-cancel">取消</button>
          <button @click="confirmDelete" class="btn-delete">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import {getCheckinInfo} from "@/api/checkin.js";

// 响应式数据
const searchForm = ref({
  houseCode: '',        // 房屋编码
  ownerName: '',        // 户主姓名
  agreementCode: ''     // 协议编码
})

//获取入住信息
const records = ref([])
const loading = ref(false)
const filteredRecords = ref([])// 过滤后的入住记录
const fetchCheckinRecords = async () => {
  loading.value = true
  try {
    const response = await getCheckinInfo()
    records.value = response.data || []
    filteredRecords.value = records.value
    updatePagination()
  }catch ( error){
    console.error( "获取入住数据失败",error)
  }finally {
    loading.value = false
  }
}

const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  totalPages: 1,
  total: 0
})

const showModal = ref(false)
const modalType = ref('add') // 'add', 'edit', 'view'
const currentRecord = ref({})
const gotoPage = ref('')
const activeTab = ref('checkin') // 'checkin', 'house', 'owner', 'agreement'

// 新增的状态变量
const operationMode = ref('add') // 'add', 'edit', 'delete'
const selectedRecords = ref([])
const showDeleteConfirm = ref(false)
const deleteType = ref('single') // 'single', 'batch'
const deleteTarget = ref({})

// 房屋详情弹窗相关
const houseDetail = ref({})

// 户主详情弹窗相关
const ownerDetail = ref({})

// 协议详情弹窗相关
const agreementDetail = ref({})

// 计算属性
const modalTitle = computed(() => {
  switch (modalType.value) {
    case 'add': return '新增入住信息'
    case 'edit': return '编辑入住信息'
    case 'view': return '入住信息详情'
    default: return ''
  }
})

const paginatedRecords = computed(() => {
  const start = (pagination.value.currentPage - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return filteredRecords.value.slice(start, end)
})

const visiblePages = computed(() => {
  const current = pagination.value.currentPage
  const total = pagination.value.totalPages
  const pages = []

  for (let i = Math.max(1, current - 2); i <= Math.min(total, current + 2); i++) {
    pages.push(i)
  }

  return pages
})

const isAllSelected = computed(() => {
  return paginatedRecords.value.length > 0 &&
      paginatedRecords.value.every(record => selectedRecords.value.includes(record.id))
})

// 方法
const updatePagination = () => {
  pagination.value.total = filteredRecords.value.length
  pagination.value.totalPages = Math.ceil(filteredRecords.value.length / pagination.value.pageSize)
  if (pagination.value.currentPage > pagination.value.totalPages) {
    pagination.value.currentPage = 1
  }
}

// 格式化合同有效期显示
const formatContractValidity = (effectiveDate, expiryDate) => {
  if (!effectiveDate && !expiryDate) return '-'

  const formatDateString = (dateString) => {
    if (!dateString) return ''
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    }).replace(/\//g, '-')
  }

  const effective = formatDateString(effectiveDate)
  const expiry = formatDateString(expiryDate)

  if (effective && expiry) {
    return `${effective} 至 ${expiry}`
  } else if (effective) {
    return `${effective} 至 -`
  } else if (expiry) {
    return `- 至 ${expiry}`
  } else {
    return '-'
  }
}

// 计算缴费倒计时
const getPaymentCountdown = (paymentDueDate) => {
  if (!paymentDueDate) return '-'

  const dueDate = new Date(paymentDueDate)
  const now = new Date()

  // 将时间设置为当天的开始，避免小时分钟的影响
  now.setHours(0, 0, 0, 0)
  dueDate.setHours(0, 0, 0, 0)

  // 计算时间差（天数）
  const diffTime = dueDate - now
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

  if (diffTime < 0) {
    // 已过期
    return `逾期${Math.abs(diffDays)}天`
  } else if (diffDays === 0) {
    // 今天到期
    return '今天到期'
  } else {
    // 未到期
    return `剩余${diffDays}天`
  }
}

// 根据倒计时天数返回不同的样式类
const getCountdownClass = (record) => {
  if (!record.paymentDueDate) return 'countdown-normal'

  const dueDate = new Date(record.paymentDueDate)
  const now = new Date()

  // 将时间设置为当天的开始
  now.setHours(0, 0, 0, 0)
  dueDate.setHours(0, 0, 0, 0)

  const diffTime = dueDate - now
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

  if (diffTime < 0) {
    return 'countdown-expired'
  } else if (diffDays <= 7) {
    return 'countdown-warning'
  } else {
    return 'countdown-normal'
  }
}


const handleSearch = () => {
  filteredRecords.value = records.value.filter(record => {
    return (
        // 房屋编码模糊匹配
        (!searchForm.value.houseCode || record.houseCode.includes(searchForm.value.houseCode)) &&

        // 户主姓名模糊匹配
        (!searchForm.value.ownerName || record.ownerName.includes(searchForm.value.ownerName)) &&

        // 协议编码模糊匹配
        (!searchForm.value.agreementCode || record.agreementCode.includes(searchForm.value.agreementCode))
    )
  })
  pagination.value.currentPage = 1
  selectedRecords.value = []
  updatePagination()
}

const handleReset = () => {
  searchForm.value = {
    houseCode: '',
    ownerName: '',
    agreementCode: ''
  }
  filteredRecords.value = [...records.value]
  pagination.value.currentPage = 1
  selectedRecords.value = []
  updatePagination()
}

const handleAdd = () => {
  operationMode.value = 'add'
  selectedRecords.value = []
  modalType.value = 'add'
  currentRecord.value = {
    id: Date.now(),
    houseCode: '',
    ownerName: '',
    paymentExpiryDate: '',
    contractValidity: '',
    checkInDate: '',
    checkOutDate: '',
    agreementCode: ''
  }
  showModal.value = true
}

const handleModeChange = (mode) => {
  operationMode.value = mode
  selectedRecords.value = []
}

const handleEdit = (record) => {
  modalType.value = 'edit'
  currentRecord.value = { ...record }
  showModal.value = true
}

const handleView = (record) => {
  modalType.value = 'view'
  activeTab.value = 'checkin'
  currentRecord.value = { ...record }

  // 初始化详情数据
  viewHouseDetail(record)
  viewOwnerDetail(record)
  viewAgreementDetail(record)

  showModal.value = true
}

const handleSingleDelete = (record) => {
  deleteType.value = 'single'
  deleteTarget.value = record
  showDeleteConfirm.value = true
}

const handleBatchDelete = () => {
  if (selectedRecords.value.length === 0) return
  deleteType.value = 'batch'
  showDeleteConfirm.value = true
}

const handleSelectAll = (event) => {
  if (event.target.checked) {
    selectedRecords.value = paginatedRecords.value.map(record => record.id)
  } else {
    selectedRecords.value = []
  }
}

const handleExport = () => {
  // 导出功能实现
  console.log('导出数据')
}

const confirmDelete = () => {
  if (deleteType.value === 'single') {
    // 单个删除
    const recordId = deleteTarget.value.id
    records.value = records.value.filter(record => record.id !== recordId)
    filteredRecords.value = filteredRecords.value.filter(record => record.id !== recordId)
  } else {
    // 批量删除
    records.value = records.value.filter(record => !selectedRecords.value.includes(record.id))
    filteredRecords.value = filteredRecords.value.filter(record => !selectedRecords.value.includes(record.id))
    selectedRecords.value = []
  }

  updatePagination()
  showDeleteConfirm.value = false
  deleteTarget.value = {}
}

const cancelDelete = () => {
  showDeleteConfirm.value = false
  deleteTarget.value = {}
}

const handleSave = () => {
  if (modalType.value === 'add') {
    records.value.push({...currentRecord.value})
    filteredRecords.value.push({...currentRecord.value})
  } else if (modalType.value === 'edit') {
    const index = records.value.findIndex(record => record.id === currentRecord.value.id)
    if (index !== -1) {
      records.value[index] = {...currentRecord.value}
    }
    const filteredIndex = filteredRecords.value.findIndex(record => record.id === currentRecord.value.id)
    if (filteredIndex !== -1) {
      filteredRecords.value[filteredIndex] = {...currentRecord.value}
    }
  }
  updatePagination()
  closeModal()
}

const closeModal = () => {
  showModal.value = false
  currentRecord.value = {}
  activeTab.value = 'checkin'
}

const goToPage = (page) => {
  pagination.value.currentPage = page
  selectedRecords.value = []
}

const goToPrevPage = () => {
  if (pagination.value.currentPage > 1) {
    pagination.value.currentPage--
    selectedRecords.value = []
  }
}

const goToNextPage = () => {
  if (pagination.value.currentPage < pagination.value.totalPages) {
    pagination.value.currentPage++
    selectedRecords.value = []
  }
}

const handleGotoPage = () => {
  const page = parseInt(gotoPage.value)
  if (page >= 1 && page <= pagination.value.totalPages) {
    pagination.value.currentPage = page
    gotoPage.value = ''
    selectedRecords.value = []
  }
}

// 房屋详情弹窗相关方法
const viewHouseDetail = (record) => {
  // 模拟获取房屋详细信息
  houseDetail.value = {
    houseCode: record.houseCode,
    communityName: '阳光小区',
    building: record.houseCode.charAt(0) + '栋',
    unit: '1单元',
    floor: record.houseCode.charAt(1) + '层',
    roomNumber: record.houseCode.substring(2) + '室',
    area: '80',
    houseType: '两室一厅',
    status: '已入住',
    decorationStatus: '精装修'
  }
}

// 户主详情弹窗相关方法
const viewOwnerDetail = (record) => {
  // 模拟获取户主详细信息
  ownerDetail.value = {
    name: record.ownerName,
    gender: record.ownerName === '张三' ? '男' : record.ownerName === '李四' ? '男' : '女',
    idCard: '11010119900307XXXX',
    phone: '13800138000',
    email: record.ownerName.toLowerCase() + '@example.com',
    emergencyContact: '王五',
    emergencyPhone: '13900139000',
    address: '北京市朝阳区某某街道某某号',
    occupation: record.ownerName === '张三' ? '软件工程师' : record.ownerName === '李四' ? '教师' : '医生',
    workplace: record.ownerName === '张三' ? '某某科技公司' : record.ownerName === '李四' ? '某某中学' : '某某医院'
  }
}

// 协议详情弹窗相关方法
const viewAgreementDetail = (record) => {
  // 模拟获取协议详细信息
  agreementDetail.value = {
    agreementCode: record.agreementCode,
    houseCode: record.houseCode,
    ownerName: record.ownerName,
    agreementType: '租赁协议',
    signDate: '2023-01-01',
    effectiveDate: '2023-01-01',
    expiryDate: '2024-12-31',
    status: '生效中',
    rent: '3000',
    deposit: '6000'
  }
}

// 生命周期
onMounted(() => {
  fetchCheckinRecords()
})
</script>

<style scoped>
/* 基础布局样式 */
.check-in-management {
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  padding: 30px 30px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 0 15px 15px 15px;
}

/* 页面标题 */
.page-title {
  color: rgba(231, 59, 69, 1);
  font-size: 18px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  margin: 0 0 20px 0;
  line-height: 25px;
}

/* 搜索筛选区域 */
.search-filters {
  margin-bottom: 6px;
}

.search-item {
  display: block;
  margin-bottom: 5px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 1527px;
  height: 32px;
}

/* 统一的输入框和选择框样式 */
.input-field, .select-field {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  height: 32px;
  border: 1px solid rgba(216, 216, 216, 1);
  width: 180px;
  padding: 6px 10px;
  font-size: 14px;
  color: rgba(153, 153, 153, 1);
  box-sizing: border-box;
  line-height: 20px;
}

.input-field:focus, .select-field:focus {
  outline: none;
  border-color: rgba(231, 59, 69, 1);
  color: rgba(0, 0, 0, 1);
}

.input-field::placeholder {
  color: rgba(153, 153, 153, 1);
}

/* 统一的按钮样式 */
.btn-primary {
  background-color: rgba(231, 59, 69, 1);
  border-radius: 4px;
  width: 80px;
  height: 32px;
  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  margin-left: 20px;
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  width: 80px;
  height: 32px;
  border: 1px solid rgba(151, 151, 151, 1);
  color: rgba(135, 136, 138, 1);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.btn-add {
  background-color: rgba(252, 235, 236, 1);
  border-radius: 19px;
  width: 80px;
  height: 32px;
  border: none;
  color: rgba(231, 59, 69, 1);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-add:hover {
  background-color: rgba(248, 220, 222, 1);
}

.btn-export {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  width: 80px;
  height: 32px;
  border: 1px solid rgba(151, 151, 151, 1);
  color: rgba(135, 136, 138, 1);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-export:hover {
  background-color: rgba(245, 245, 245, 1);
}

.btn-batch-delete {
  background-color: rgba(255, 77, 79, 1);
  border-radius: 19px;
  height: 32px;
  padding: 0 16px;
  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  cursor: pointer;
  margin-left: 20px;
}

.btn-batch-delete:hover {
  background-color: rgba(235, 57, 59, 1);
}

.btn-icon {
  width: 13px;
  height: 13px;
}

/* 分割线 */
.divider {
  width: 1533px;
  height: 1px;
  background-color: rgba(237, 239, 244, 1);
  margin: 50px 0 0 0;
}

/* 操作按钮组样式 */
.operation-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 20px 0;
}

/* 表格样式 */
.table-container {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(237, 239, 244, 1);
  width: 100%;
  height: 610px;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header {
  background-color: rgba(249, 248, 252, 1);
  height: 60px;
  border-radius: 4px;
  border: 1px solid rgba(237, 239, 244, 1);
}

.table-header th {
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  padding: 13px 21px;
  line-height: 20px;
}

.table-row {
  background-color: rgba(255, 255, 255, 1);
  height: 55px;
  border: 1px solid rgba(237, 239, 244, 1);
}

.table-row td {
  color: rgba(102, 102, 102, 1);
  font-size: 16px;
  font-weight: normal;
  padding: 10px 21px;
  line-height: 20px;
  white-space: nowrap;
}

/* 缴费倒计时样式 */
.countdown-normal {
  color: #52c41a;
  font-weight: bold;
}

.countdown-warning {
  color: #faad14;
  font-weight: bold;
}

.countdown-expired {
  color: #ff4d4f;
  font-weight: bold;
}

/* 可点击的链接文本 */
.link-text {
  color: rgba(231, 59, 69, 1);
  cursor: pointer;
  text-decoration: underline;
}

.link-text:hover {
  color: rgba(200, 30, 40, 1);
}

/* 复选框样式 */
.checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 43px;
  align-items: center;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn img {
  width: 13px;
  height: 13px;
}

/* 分页样式 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.pagination-info {
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  line-height: 20px;
}

.pagination-btn {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  cursor: pointer;
  min-width: 32px;
  height: 32px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
  background-color: rgba(249, 248, 252, 1);
}

.pagination-btn.active {
  background-color: rgba(231, 59, 69, 1);
  color: white;
  border-color: rgba(231, 59, 69, 1);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-goto {
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  line-height: 20px;
  margin-left: 20px;
}

.goto-input {
  width: 50px;
  height: 32px;
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
  padding: 6px;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.delete-confirm-modal {
  width: 400px;
  max-height: none;
  overflow-y: visible;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(237, 239, 244, 1);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: rgba(231, 59, 69, 1);
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: rgba(102, 102, 102, 1);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: rgba(231, 59, 69, 1);
}

/* 标签页样式 */
.modal-tabs {
  display: flex;
  border-bottom: 1px solid rgba(237, 239, 244, 1);
  background-color: rgba(249, 248, 252, 1);
}

.tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  border-bottom: 2px solid transparent;
}

.tab-btn:hover {
  color: rgba(231, 59, 69, 1);
}

.tab-btn.active {
  color: rgba(231, 59, 69, 1);
  border-bottom: 2px solid rgba(231, 59, 69, 1);
}

.modal-body {
  padding: 20px;
}

.modal-body p {
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  line-height: 1.5;
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item label {
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  font-weight: 500;
  line-height: 20px;
}

.form-input {
  height: 32px;
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  line-height: 20px;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: rgba(231, 59, 69, 1);
}

.form-input:disabled {
  background-color: rgba(249, 248, 252, 1);
  color: rgba(153, 153, 153, 1);
  cursor: not-allowed;
}

/* 详情弹窗样式 */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item label {
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  font-weight: 500;
  line-height: 20px;
}

.detail-item span {
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  line-height: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid rgba(237, 239, 244, 1);
}

.btn-cancel {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  cursor: pointer;
  line-height: 20px;
}

.btn-save, .btn-export-confirm {
  background-color: rgba(231, 59, 69, 1);
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 14px;
  color: white;
  cursor: pointer;
  line-height: 20px;
}

.btn-delete {
  background-color: rgba(255, 77, 79, 1);
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 14px;
  color: white;
  cursor: pointer;
  line-height: 20px;
}

.btn-cancel:hover {
  background-color: rgba(249, 248, 252, 1);
}

.btn-save:hover, .btn-export-confirm:hover {
  background-color: rgba(207, 53, 63, 1);
}

.btn-delete:hover {
  background-color: rgba(235, 57, 59, 1);
}
</style>
